<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.container{
				border: 1px solid #00ffff;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background-color: aquamarine;
				padding: 10px;
				margin: 10px;
			}
			button{
				margin: 10px;
			}
		</style>
		<!-- 元素遍历	用于DOM树中遍历元素 【理解：元素嵌套，父子级】
		 children()		功能：获取匹配元素中每个元素的子元素
		 parent()		功能：获取匹配元素中每个元素的父元素
		 
		 siblings()		功能：获取匹配元素中每个元素的所有兄弟元素
		 
		 next()			功能：获取匹配元素中每个元素的下一个兄弟元素
		 prev()			功能：获取匹配元素中每个元素的上一个兄弟元素
		 
		 each()			功能：遍历匹配元素的集合--所有子元素
		                语法糖：each(function(index,element){
							$(element).text(`${index}`)
							注意：打印遍历的值，不可以使用单双引号+拼接
							功能：获取到的元素，遍历元素内容
						})
						     index:下标   element：元素  形参
							 		
						 
		 -->
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
		<button id="gc">获取子元素</button>
		<button id="gp">获取父元素</button>
		<button id="gs">获取兄弟元素</button>
		<button id="gn">获取下一个兄弟元素</button>
		<button id="gr">获取上一个兄弟元素</button>
		<button id="loop">遍历元素</button>
		
		<script>
			/* 1.点击 获取子元素 按钮   实现.container下所有子元素添加背景色 */
			$("#gc").click(function(){
					// 通过 父找子 函数  --添加背景色
				$(".container").children().css("background-color","#ffaaff");	
			});
			/* 2.点击 获取父元素 按钮   实现.container 添加背景色 */
			$("#gp").click(function(){
				$("#box2").parent().css("background-color","#ff0000");	
			});
			/* 3.点击 获取兄弟元素 按钮  实现除了 #box4 字体颜色不变，其他变色 */
			$("#gs").click(function(){
				$("#box4").siblings().css("color","#ffff7f");	
			});
			/* 4.点击 获取下一个兄弟元素 按钮   实现#box4 下一个兄弟，添加背景色 */
			$("#gn").click(function(){
				$("#box4").next().css("background-color","#ff557f");	
			});
			/* 5.点击·获取上一个兄弟元素 按钮:实现#box6 上一个兄弟，添加效果
			                               圆  背景图  背景色 盒子阴影*/
			$("#gr").click(function(){
				$("#box6").prev().css({"width":"300px",
				                        "height":"300px",
										"border-radius":"50%",
										"background-image":"url(../img/1.gif)",
										"background-size":"100% 100%",
										"box-shadow":"5px 10px 10px green",
										"background-color":"pink",
										"font-size":"0"
			});
		   });
		   /* 6.点击 遍历元素 按钮  实现每个盒子上：这是第几个盒子*/
		   $("#loop").click(function(){
			   // 通过 .box 抓到6个元素【一组集合】
			   $(".box").each(function(i,e){ //e 代表元素  i代表下标
				   // 每个盒子加文字：这是第几个盒子
				  $(e).text(`这是第${i+1}盒子`); 
			   });
		   });
		   /* 
		     大作业：tab选项卡
			 BOM【了解】 吸顶灯效果案例
			 小米页面效果
		   */
		</script>
	</body>
</html>